<template>
	<view class="approve-line-wrap">
		<u-cell-group>
			<u-cell icon="account" v-for="(flow, index) in approveFlows" :key="flow.ProblemApproveId" :title="flow.ProblemApprovePsn" :value="flow.ProblemApproveStr">
				<view v-if="flow.ProblemApproveIsFinsh" slot="title" class="u-slot-title">
					<text class="u-cell-text">{{ getBaseDocName($GC.BASEDOC.PSNDOC_USER,flow.ProblemApprovePsn)  }}</text>
					<u-tag style="width: 140rpx;" :text="flow.ProblemApprovePeriod" plain size="mini" type="warning"></u-tag>
				</view>
				<!-- 当前审批环节 -->
				<view v-if="!flow.ProblemApproveIsFinsh" slot="title" class="u-slot-title">
					<text class="u-cell-text">{{ getBaseDocName($GC.BASEDOC.PSNDOC_USER,flow.ProblemApprovePsn) }}</text>
					<u-tag style="width: 100rpx" text="审批中" plain size="mini" type="warning"></u-tag>
				</view>
			</u-cell>
		</u-cell-group>
	</view>
</template>

<script>
export default {
	name: 'ProblemApproveFlow',
	props: {
		billId: {
			type: String,
			required: true
		},
		billType: {
			type: String,
			default: 'defaultType' // 默认的单据类型
		}
	},
	data() {
		return {
			approveFlows: [], //单据审批流
			details: null // 单据明细数据
		};
	},
	mounted() {
		if (!this.billId) return
		let queryParam = {
			ProblemId: this.billId
		};
		this.$api
			.queryProblemApproveFlow(queryParam)
			.then((res) => {
				if (res.success) {
					this.approveFlows = res.data;
				}
			})
			.catch((error) => {
				this.$tool.msg('数据加载失败！');
			});
		this.$emit('detail-loaded'); // 触发错误事件
	},
	methods: {
		/**
		 * @param {Object} docType 档案类型，可使用全局常量
		 * @param {Object} innerValue 档案内容
		 */
		getBaseDocName(docType,innerValue) {
			let display = innerValue;
			let baseDocData = uni.getStorageSync(docType);
			
			if(Array.isArray(baseDocData)) {
				baseDocData.map((item) => {
					if (item.refid === innerValue) {
						display = item.refname;
					}
				});
			}
			return display;
		},
		async loadDetails() {
			try {
				// 假设有一个API服务来获取单据明细
				const response = await this.fetchBillDetails(this.billId, this.billType);
				this.details = response.data;
				this.$emit('detail-loaded'); // 触发明细加载完成事件
			} catch (error) {
				console.error('加载单据明细时出错:', error);
				this.$emit('error-occurred', error); // 触发错误事件
			}
		},
		// 模拟的API调用函数，实际项目中应替换为真实的API调用
		async fetchBillDetails(billId, billType) {
			// 使用axios、fetch或其他HTTP库进行API调用...
		}
	}
};
</script>

<style lang="scss" scoped></style>
